<div class="involved-wrapper" [ngStyle]="klStyle" (click)="toggleSelector($event)">
    <nz-select nzMode="multiple"
               [class]="klClass"
               style="width:100%;"
               [(nzOpen)]="isOpen"
               [nzAllowClear]="true"
               [nzDropdownMatchSelectWidth]="false"
               [nzPlaceHolder]="'请选择项目'"
               [(ngModel)]="selectedProjects">
        <nz-option *ngFor="let project of projects"
                   [nzValue]="project.value"
                   [nzLabel]="project.label">
        </nz-option>
    </nz-select>
    <div class="involved-project-overlay">
        <span *ngIf="!(selectedProjects && selectedProjects?.length);else countTpl" class="placeholder">
            请选择涉及项目
        </span>
        <ng-template #countTpl>
            <span nz-popover
                  nzType="primary"
                  nzTrigger="hover"
                  [nzContent]="projectsTpl"
                  class="selected-count">
                {{selectedProjects.length}}个项目
            </span>
        </ng-template>
        <ng-template #projectsTpl>
            <!-- TODO class 样式覆盖不到，因为他在overlay下，不在当前组件下 ?-->
            <ul class="show-projects" style="margin: 0;padding: 0 0 0 8px;">
                <li *ngFor="let project of selectedObj">
                    {{project.label}}
                </li>
            </ul>
        </ng-template>
    </div>
</div>

